<template>
	<div class="p-[20px]">
		<level-panel :item="levelPanelItem" :level="levelPanelProgress" :vertical="true" />
	</div>
	<RewardsList :vertical="true" />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import LevelPanel from '@/views/activity/components/level-panel/index.vue'
import { useActivityStore } from '@/store'
import RewardsList from '@/views/activity/components/rewards-list/index.vue'

import { fmtAmount, t } from '@/utils'

const PANEL_REQUIREMENTS_LIST: any = {
	requirements: {
		content: computed(() => t('rewards.panelBenefitsContent')),
		img: 'activity/banner-requirement.png',
		icon: 'activity/star-level.svg',
		ableBet: true,
		link: '/details/rewards-vip-xp'
	},
	benefits: {
		content: computed(
			() =>
				t('rewards.panelRequirementsContent') +
				t('rewards.sportsStake', {
					amount: fmtAmount(useActivityStore().upgradeRule.vip.sport.left, {
						useName: true,
						precision: [0, true]
					}),
					xp: useActivityStore().upgradeRule.vip.sport.right
				}) +
				t('rewards.slotsStake', {
					amount: fmtAmount(useActivityStore().upgradeRule.vip.slot.left, {
						useName: true,
						precision: [0, true]
					}),
					xp: useActivityStore().upgradeRule.vip.slot.right
				}) +
				t('rewards.casinoStake', {
					amount: fmtAmount(useActivityStore().upgradeRule.vip.casino.left, {
						useName: true,
						precision: [0, true]
					}),
					xp: useActivityStore().upgradeRule.vip.casino.right
				})
		),
		img: 'activity/banner-benefit.png',
		icon: 'activity/vip-level.svg',
		ableBet: false
	}
}
const activityStore = useActivityStore()
//const accountStore = useAccountStore()
const levelPanelItem = computed(() => PANEL_REQUIREMENTS_LIST['requirements'])
const levelPanelProgress = computed(() => ({
	...activityStore.vipPanel(),
	next: {
		...activityStore.vipPanel().next,
		icon: activityStore.vipList.find(({ level }) => activityStore.vipPanel().next.level === level)
			?.logo
	}
}))

// const starPanelItem = computed(() => PANEL_REQUIREMENTS_LIST['rebate'])
// const starPanelProgress = computed(() => ({
// 	...activityStore.starPanel(),
// 	next: {
// 		...activityStore.starPanel().next,
// 		icon: activityStore.starList.find(({ level }) => activityStore.starPanel().next.level === level)
// 			?.logo
// 	}
// }))
</script>
<!--<style scoped>-->
<!--:deep(.n-tabs-tab) {-->
<!--	position: relative;-->
<!--	padding: 10px 0;-->
<!--	text-align: center;-->
<!--}-->
<!--:deep(.n-tabs-bar) {-->
<!--	width: 36px !important;-->
<!--	height: 3px !important;-->
<!--	background-color: var(&#45;&#45;color-primary) !important;-->
<!--}-->
<!--</style>-->
